<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/bootstrap.min.css"/>
    <link href="<%=request.getContextPath() %>/resources/bootstrap-table.css" rel="stylesheet"/>
    <link rel="stylesheet" href="<%=request.getContextPath() %>/resources/layer.css" />
    <script src="<%=request.getContextPath() %>/resources/jquery.2.0.min.js"></script>
    <script src="<%=request.getContextPath() %>/resources/bootstrap-table.js"></script>
    <script src="<%=request.getContextPath() %>/resources/bootstrap-table-zh-CN.js"></script>
    <script src="<%=request.getContextPath() %>/resources/layer.js"></script>
    <script>
        function input(id) {
                    layer.open({
                        type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
                        shade:0.1, //遮罩层透明度
                        area:['850px','500px'], //弹出层宽高
                        title:'编辑',//弹出层标题
                        close:true,
                        content: '<%=request.getContextPath() %>/user/doUpdate?id='+id //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
                    });
        }
    </script>
    <script>
        $(function () {
            getbaseList();
        });

        function getbaseList(){
            $("#table").bootstrapTable({
                search: true,
                pagination: false,
                url: "<%=request.getContextPath() %>/user/data", // 获取表格数据的url
                contentType: "application/x-www-form-urlencoded",
                cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
                striped: true,  //表格显示条纹，默认为false
                method: "POST",
                dataType: "json",
                pagination: true, // 在表格底部显示分页组件，默认false
                pageList: [10, 50, 100], // 设置页面可以显示的数据条数
                pageSize: 5, // 页面数据条数
                pageNumber: 1, // 首页页码
                sidePagination: 'server', // 设置为服务器端分页
                clickToSelect: true,
                height: $(window).height() - 270,
                paginationFirstText: "首页",
                paginationPreText: '上一页',
                paginationNextText: '下一页',
                paginationLastText: '最后一页',
                smartDisplay: false,
                toolbar : "#toolbar",
                queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求



                    var temp = {
                        pageSize: params.limit, // 每页要显示的数据条数
                        pageNumber: (params.offset / params.limit) + 1, // 每页显示数据的开始行号
                        sort: params.sort, // 要排序的字段
                        sortOrder: params.order // 排序规则

                    }
                    return temp;
                },
                columns: [{
                    checkbox: true
                }, {
                    title: '序号',//标题  可不加
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                } , {
                    field: 'id',
                    title: 'id',
                    sortable: true,
                    width: '1000px'

                }, {
                    field: 'loginName',
                    title: '登陆名称',
                    sortable: true,
                    width: '1000px'

                }, {
                    field: 'loginPass',
                    title: '密码',
                    sortable: true,
                    width: '1000px'

                }, {
                    field: 'nick',
                    title: '昵称',
                    sortable: true,
                    width: '1000px'

                }, {
                    field: 'nick',
                    title: '昵称',
                    sortable: true,
                    width: '1000px'

                }, {
                    field: 'nick',
                    title: '操作',
                    sortable: true,
                    width: '1000px',
                    formatter: function (value, row, index) {
                        var c = '<a class="green-color" href="#"  onclick="info(\''
                            + row.id
                            + '\')">查看</a> ';
                        var e = '<a class="green-color" href="#"  onclick="input(\''
                            + row.id
                            + '\')">编辑</a> ';
                        var d = '<a class="red-color" href="#"  onclick="del(\''
                            + row.id
                            + '\')">删除</a> ';
                        return c + e + d;
                    }
                    }
                ]
            });
        }
    </script>
    <script>
        function exportExcel() {
            window.location.href="<%=request.getContextPath() %>/user/exportExcel";
        }
        function upload() {
            layer.open({
                type: 2, //Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）,
                shade:0.1, //遮罩层透明度
                area:['850px','500px'], //弹出层宽高
                title:'编辑',//弹出层标题
                close:true,
                content: '<%=request.getContextPath() %>/user/doUpload' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        }
    </script>
</head>

<body>
    <div id="table"></div>
    <div id="toolbar" class="btn-group">
        <button id="btn_add" type="button" class="btn" onclick="exportExcel();">
                           下载
                       </button>
        <button id="btn_add" type="button" class="btn" onclick="upload();">
                           上传
                       </button>
    </div>

</body>

</html>
